﻿@{
    string paramStr = Request["ParamStr"].ToString();
}

<!-- ECharts文件引入 -->
<script src="~/Content/js/plugs/echarts-2.2.7/echarts-all.js" type="text/javascript"></script>
<script src="~/Content/js/baseEchartOption.js" type="text/javascript"></script>

<div class="page" style="position:relative;">
</div>
<!-- 标题栏 -->
<header class="bar bar-nav">
    <a href="@Url.Content("Index")" class="button button-link button-nav pull-left">
        <span class="icon icon-left"></span>
        返回
    </a>
    <h1 class='title'>采购统计</h1>
</header>

<!-- 工具栏 -->
<nav class="bar bar-tab">
    <a class="tab-item" href="@Url.Action("Index", "Home")">
        <span class="icon icon-home"></span>
        <span class="tab-label">概览</span>
    </a>
    <a class="tab-item" href="@Url.Action("Index", "Product")">
        <span class="icon icon-app"></span>
        <span class="tab-label">商品</span>
    </a>
    <a class="tab-item" href="@Url.Action("Index", "Count")">
        <span class="icon icon-picture"></span>
        <span class="tab-label">采购统计</span>
    </a>
    <a class="tab-item" href="@Url.Action("Index", "PurchaEdit")">
        <span class="icon icon-edit"></span>
        <span class="tab-label">采购填报</span>
    </a>
</nav>

<!-- 页面内容区 -->
<div class="content">
    <div class="content-padded grid-demo">
        <div class="rowTT no-gutter">
            <div class="col-100">类别：@ViewData["tproType"]</div>
            <div class="col-100"><hr style="height:1px;border:none;border-top:1px dashed #BABABA;" /></div>
            <div class="col-100">产地：@ViewData["tproAddress"]</div>
            <div class="col-100"><hr style="height:1px;border:none;border-top:1px dashed #BABABA;" /></div>
            <div class="col-100">品种：@ViewData["tvarieti"]</div>
            <div class="col-100"><hr style="height:1px;border:none;border-top:1px dashed #BABABA;" /></div>
        </div>
    </div>
    <div id="product_buy_tendency_div" class="analysisBox">
        <div id="product_buy_tendency" class="analysisContainer"></div>
    </div>

    <div class="content-padded grid-demo" id="detailData">
        <div class="row no-gutter">
            <div class="col-30" style="width: 30%;margin: 0;"><strong>上架时间</strong></div>
            <div class="col-20"><strong>等级</strong></div>
            <div class="col-25"><strong>采购价</strong></div>
            <div class="col-25"><strong>零售价</strong></div>
        </div>
    </div>
</div>

<style type="text/css">
    .grid-demo .row {
        text-align: center;
    }

    .grid-demo .row > [class*=col-] {
        border: 1px solid #ddd;
    }

    /*.row .no-gutter .col-30 {
        width: 30%;
        margin: 0;
    }*/

    /*#detailData{
        margin-bottom: 4rem;
    }

    #detailData a div.showDetailCss{
        width:25%;
        float:left;
        text-align:center;
    }*/

    .analysisBox {
        text-align: center;
        border: 1px solid #ece6e6;
        width: 100%;
        margin: auto;
    }

    .analysisBox div.analysisContainer {
        width: 100%;
        height: 12rem;
    }
</style>


<script type="text/javascript">
    var product_buy_tendency = echarts.init(document.getElementById('product_buy_tendency'));
    var product_buy_tendency_option = null;
    var nameList = null;

    $(function () {
        showDetail();
    })
    function showDetail() {
        var paramStr = '@paramStr';
        $.get("/Count/GetPruDataTable", { paramStr: paramStr }, function (result) {
            product_buy_tendency.clear();
            product_buy_tendency_option = null;
            nameList = null;

            var rootData = result.Body;
            var list = rootData.list;
            var bar = rootData.bar;
            var nameList = bar.NameList;
            var dataList = bar.DataList;
            var legendList = bar.LegendList;
            var title = "";

            product_buy_tendency_option = getBarOption(title, legendList, nameList, dataList, true, false, false);
            product_buy_tendency.setOption(product_buy_tendency_option);
            var htmlContent = "";
            $.each(list, function (i, item) {
                htmlContent += '<a href="/Count/Detail?PurID=' + item.Id + '">' +
                '<div class="row no-gutter">' +
                '<div class="col-30" style="width: 30%;margin: 0;">' + item.ShelfTimeStr + '</div>' +
                '<div class="col-20">' + item.Str_Grade + '</div>' +
                '<div class="col-25">¥' + item.PurPrice + '</div>' +
                '<div class="col-25">¥' + item.RetailPrice + '</div>' +
                '</div>' +
                '</a>';
            });
            $("#detailData").append(htmlContent);
        });
    }

    product_buy_tendency.on("click", function (params) {
        var start = parseInt((100 / nameList.length) * (params.dataIndex - 3));
        if (start < 0) {
            start = 0;
        }
        var end = parseInt((100 / nameList.length) * (params.dataIndex + 3));
        if (end > 100) {
            end = 100;
        }
        product_buy_tendency.clear();
        product_buy_tendency_option.dataZoom.start = start;
        product_buy_tendency_option.dataZoom.end = end;
        product_buy_tendency.setOption(product_buy_tendency_option);
    });
</script>



